<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        user-select: none;
        width: 100%;
        height: 100%;
        background: #0f2027; /* fallback for old browsers */
        /* background: -webkit-linear-gradient(to right, #0f2027, #203a43, #2c5364); Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(
          to bottom,
          #0a1b22,
          #324b70,
          #3a6075
        ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <script>
      //   var body = document.body
      document.body.onclick = function (e) {
        var x = e.clientX
        var y = e.clientY
        // console.log(x)
        var imgNode = document.createElement('img')
        imgNode.src =
          ''
        width = getRandom(80, 10)
        imgNode.width = width
        imgNode.style.left = x - width / 2 + 'px'
        imgNode.style.top = y - width / 2 + 'px'
        console.log(imgNode)
        document.body.appendChild(imgNode)
      }
      function getRandom(max, min) {
        return Math.floor(Math.random() * (max - min + 1) + min)
      }
    </script>
  </body>
</html>
